<template>
  <div>
    <el-table
      :border="true"
      :data="list"
      stripe
      style="width: 100%; margin: 20px"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column prop="borrowAmount" label="借款额度"> </el-table-column>
      <el-table-column prop="integralStart" label="积分区间开始">
      </el-table-column>
      <el-table-column prop="integralEnd" label="积分区间结束">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
//引入js模块
import integralgradeApi from "@/api/integralgrade";
//js脚本：export default和vue中的开发方式一样
export default {
  data() {
    return {
      //定义变量接收查询到的积分等级列表
      list: [],
    };
  },
  //integralgrade
  created() {
    //调用查询积分等级方法
    this.initData();
  },
  methods: {
    handleEdit(idx, row) {
      //idx:行索引(从0开始) ,row:代表按钮所在行数据json对象
      // this.$router.push(`/integral-grade/edit?id=${row.id}`);
      this.$router.push(`/integral-grade/edit/${row.id}`);
    },
    handleDelete(idx, row) {
      // console.log(row);
      this.$confirm(
        `此操作将永久删除借款额度为:${row.borrowAmount}积分等级, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          integralgradeApi.deleteById(row.id).then((r) => {
            this.$message.success("删除成功");
            //刷新当前页面的数据
            this.initData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查询积分等级列表
    initData() {
      integralgradeApi.getList().then((r) => {
        console.log(r);
        // console.log(r.data.items);
        this.list = r.data.items;
      });
    },
  },
};
</script>
